<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <#include "/pubHeadStyle.html">
</head>
<body>
<style>
    #LAY_app{
        overflow: hidden;
    }
</style>
    <div class="layui-tab layui-tab-brief"></div>

    <form class="layui-form" action="" lay-filter="varItem" style="background: #fff;padding: 10px 0;margin: 0 10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">按钮名称：</label>
            <div class="layui-input-block" style="width: 83%">
                <input type="text" name="btnname" lay-verify="required" autocomplete="off" class="layui-input" id="btnNameEdit"
                       value="${bpmNodeButton.btnname}" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">操作类型：</label>

            <div class="layui-input-inline" style="width: 83%">
                <select name="operatortype" lay-verify="required" lay-filter="operatortype" id="operatortypeSelect">
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text scriptArea">
            <label class="layui-form-label">前置脚本：</label>
            <div class="layui-input-block" style="width: 83%">
                <textarea name="prevscript" class="layui-textarea" style="float: left;resize:none;">${bpmNodeButton.prevscript}</textarea>
                <a href="javascript:;"  id="before" style="position: relative;right: -101%;top: -98px"><i class="iconfont iconicon_yiwenkongxin" style="font-size: 20px;opacity: 0.5;"></i></a>
                <b>脚本为javascript，用于在提交前做些处理，需要返回true或false。返回false时不做提交动作。</b>
            </div>
        </div>
        <div class="layui-form-item layui-form-text scriptArea">
            <label class="layui-form-label">后置脚本：</label>
            <div class="layui-input-block" style="width: 83%">
                <textarea name="afterscript" class="layui-textarea" style="resize:none;">${bpmNodeButton.afterscript}</textarea>
                <a href="javascript:;"  id="after" style="position: relative;right: -101%;top: -98px"><i class="iconfont iconicon_yiwenkongxin" style="font-size: 20px;opacity: 0.5;"></i></a>
                <b>脚本为javascript，用于在提交后做些处理，需要返回true或false。返回false时可以控制不关闭当前窗口。</b>
            </div>
        </div>
        <div>
            <input type="hidden"                     value="${bpmNodeButton.operatortype}" class="operatortypeHidden">
            <input type="hidden" name="isstartform"  value="${bpmNodeButton.isstartform}"  class="isstartformHidden">
            <input type="hidden" name="procDefId"    value="${bpmNodeButton.procDefId}"    class="procDefIdHidden"/>
            <input type="hidden" name="nodeid"       value="${bpmNodeButton.nodeid}"       class="nodeidHidden"/>
            <input type="hidden" name="modelId"      value="${bpmNodeButton.modelId}"      class="modelidHidden"/>
            <input type="hidden" name="nodetyped"    value="${bpmNodeButton.nodetype}"     class="nodetypeHidden"/>
            <input type="hidden" name="sn"           value="${bpmNodeButton.sn}"           class="snHidden"/>
            <input type="hidden" name="id"           value="${bpmNodeButton.id}"           class="idHidden"/>
        </div>
        <div class="layui-btn-container" style="width:100%;position: absolute;bottom: 5px;text-align: center;">
            <button class="layui-btn" lay-submit lay-filter="varForm" id="varForm">保存</button>
            <button class="layui-btn layui-btn-danger" id="close">取消</button>
        </div>
    </form>

<script>

    //Demo
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use([ 'index','form','jquery','setter'], function(){
        var form = layui.form;
        var $ = layui.$;
        var setter = layui.setter;

        /*---------------------------------↓初始化开始↓--------------------------*/

        //获取操作类型
        var isStartForm="${bpmNodeButton.isstartform}";
        var isSign='${bpmNodeButton.nodetype}';
        var bpmButtonList = eval('${buttonStr}');
        var type= "${bpmNodeButton.operatortype}";
        //根据isStartForm判断表单类型，给下拉框添加选项
        getOperatorType(bpmButtonList,isStartForm,isSign);
        function getOperatorType(bpmButtonList,isStartForm,isSign){
            //获取下拉框
            var operatortypeSelect=$("#operatortypeSelect");
            //清空下拉框
            operatortypeSelect.empty();
            //开始填充下拉框
            operatortypeSelect.append("<option value='0'>请选择操作类型</option>");
            //起始节点
            if(isStartForm==1){
                for(var i=0;i<bpmButtonList.length;i++){
                    var obj=bpmButtonList[i];
                    if(obj.type==0){    addOption(operatortypeSelect,obj,type);    }
                }
            }else{
                for(var i=0;i<bpmButtonList.length;i++){
                    var obj=bpmButtonList[i];
                    if(obj.type!=0 && obj.type!=1){
                        //isSign==0表示普通节点
                        if(isSign==0 && obj.type==2){   continue;   }
                        if(isSign==1 && obj.type==3){   continue;   }
                        addOption(operatortypeSelect,obj,type);
                    }
                }
            }
        }
        //操作类型下拉框的option内容
        function addOption(objOperator,obj,type){
            if(type==obj.operatortype){
                objOperator.append("<option value='"+ obj.operatortype + "' script='"+ obj.script +"' selected>"+obj.text +"</option>");
            }else{
                objOperator.append("<option value='"+ obj.operatortype + "' script='"+ obj.script +"'>"+obj.text +"</option>");
            }
        };

        //获取操作类型数值,并初始化前后置脚本框的显示隐藏
        $("#operatortypeSelect").val( type );
        //初始化时，控制前后置脚本框的显示隐藏
        isShowScript($(".operatortypeHidden").val());
        //初始化最后一步，必须重新加载下拉框
        form.render('select');

        /*---------------------------------↑初始化结束↑--------------------------*/

      /*  window.recover = function (callback) {
            debugger
        }*/

        /*---------------------------------↓监听事件↓--------------------------*/

        //监听提交
        form.on('submit(varForm)', function(data){
            if(data.field.operatortype==0){
                layer.msg("请选择有效的操作类型",{icon:6,time:1000});
                return false;
            }
            $.ajax({
                url: "${ctx}/workflow/bpmNodeButton/view/form",
                type: "post",
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(data.field),
                success: function (res) {
                    if(res.code==0) {
                        //成功，刷新
                        // window.parent.layer.alert(result.msg);
                        parent.layer.msg(res.msg,{icon:6,time:2500})
                    }else{
                        //失败，不刷新
                        parent.layer.msg(res.msg,{icon:5,time:2500})
                        isReload();
                    }
                    parent.layer.close(index);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    window.parent.layer.alert("保存失败！" + XMLHttpRequest.status);
                }
            })

            return false;
        });

        //监听下拉框
        form.on('select(operatortype)', function(data){
            //得到被选中的value、text
            returnText(data.elem[data.elem.selectedIndex].text);
            isShowScript(data.value);
        });

        /*---------------------------------↑监听事件↑--------------------------*/
        /*---------------------------------↓方    法↓--------------------------*/

        //回显操作类型名
        function returnText(_text) {
            $("input[name='btnname']").val(_text);
        }
        //控制前后置脚本的显示隐藏
        function isShowScript(_value){
            if(isStartForm == 1 ) {
                if (_value != 2 && _value != 3 && _value != 14 && _value != 15){
                    $(".scriptArea").show();
                    $(".scriptArea .layui-textarea").removeAttr("disabled");
                    return;
                }
            }else{
                if (_value != 9 && _value != 10 && _value != 11 && _value != 14 && _value != 15 && _value != 16){
                    $(".scriptArea").show();
                    $(".scriptArea .layui-textarea").removeAttr("disabled");
                    return;
                }
            }
            $(".scriptArea").hide();
            $(".scriptArea .layui-textarea").attr("disabled",true);
        }

        var layer = layui.layer;
        $('#before').hover(function () {
            layer.tips("<p>简单例子：" +
                "          var btn=confirm(\"是否提交？\")；" +
                "          if(btn){" +
                "           alert(\"do something...\");" +
                "           return true;" +
                "          }" +
                "           return false; </p>", '#before',{time:5000});
        },function () {
            layer.tips.close
        })
        $('#after').hover(function () {
            layer.tips("<p>简单例子：" +
                "          var btn=confirm(\"是否提交？\")；" +
                "          if(btn){" +
                "           alert(\"do something...\");" +
                "           return true;" +
                "          }" +
                "           return false; </p>", '#after',{time:5000});
        },function () {
            layer.tips.close
        })

        var index = parent.layer.getFrameIndex(window.name);
        $('#close').click(function () {
            parent.layer.close(index);
            isReload();
        })

        function isReload() {
            parent.window.isNeedReload=false;
        }
        /*---------------------------------↑方    法↑--------------------------*/
    });

</script>
</body>
</html>
